iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 19
0
Modern Web

每日挖個坑,用坑填起耍廢聊天室!系列 第 19

十九號坑,實現簡陋單一聊天室

  • 分享至 

  • xImage
  •  

在開始今天的主題之前,先確認一下router有沒有設好,上一篇應該在送出名稱之後就會切換到localhost:3000/chat這個網址~

再來還要把原本在pages > index.vue的templete和scss都複製一份到pages > chat > index.vue,目前我還沒有做到拆component,也還沒確定要不要拆,先把功能做好~所以樣式基本上都是一樣的,複製一份過來就好哩~!


今天這篇我們先不考慮多個聊天室怎麼做,先實現單一匿名聊天室~

直接開資料!並監聽一個專門傳訊息的socket事件

data(){
    return{
        channel: {
          channelId: 'all',
          name: 'undefined',
          allmsg: []
        },
        msg: '' // 在首頁的input綁定是用memberName,在內頁改成這個做區分
    }
},
computed: {
      ...mapState({
        loginData: state => state.loginData
      })
    },
methods:{
    createKey() { // 同樣產生key的函式
        return new Date().getTime() + ''
      },
    keyHandler() { // 這裡就是首頁原本input enter後處理的那塊
        const msg = {
            name: this.loginData.name, // user name
            text: this.msg, // input輸入的對話
            codeClass: 'codeClassHtml', // 這筆資料的用途之後再說
            key: this.createKey() // 一樣有記一個key
          }
        this.$socket.emit('msg', msg) // 把訊息送到socket
        this.msg = '' // 清空input
     },
     uploadMsg(msg) { // 更新訊息
       this.channel.allmsg.push(msg)
     }
},
mounted() {
    // 監聽傳送訊息事件
    this.$socket.on('uploadMsg', this.uploadMsg)
},
beforeDestroy() {
  this.$socket.off('uploadMsg')
},

然後到socket server端,多on一個事件

socket.on('msg', function(msg) { // 聽上一段this.$socket.emit('msg', msg)
  io.emit('uploadMsg', msg) // 把訊息廣播給線上所有人 -> 執行上段uploadMsg()
})

https://ithelp.ithome.com.tw/upload/images/20191004/201119628pBPKOUZZA.png

接收事件圖(不知道有沒有用...

最後我們在templete把訊息v-for出來

<div class="chat_content">
  <div>
    <div
      v-for="chat in channel.msg"
      :key="chat.key + chat.text" // key這樣設是為了防止重複,chat.key只有時間
    >
        {{chat.name}} : {{ chat.text }}
    </div>
  </div>

</div>

這樣就實現最基本的單一聊天室~~~~~~
多人的因為想改寫法,之後再寫ㄅ(躺


上一篇
十八號坑,坑裡有個藏寶箱-Vuex
下一篇
二十號坑,設計對話腳本與component
系列文
每日挖個坑,用坑填起耍廢聊天室!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
King Tzeng
iT邦新手 3 級 ‧ 2019-10-05 10:09:45

這是一對一聊天的概念嗎?/images/emoticon/emoticon37.gif

可以對多喔~~~
只要在線上的都可以收到

我要留言

立即登入留言